<template>
  <div class="demo">
    <div class="demo-title">template 风格的 API</div>
    <div class="demo-content">
      <Table :data-source="data">
        <Table.ColumnGroup>
          <template #title><span style="color: #1890ff">Name</span></template>
          <Table.Column key="firstName" data-index="firstName">
            <template #title><span style="color: #1890ff">First Name</span></template>
          </Table.Column>
          <Table.Column key="lastName" title="Last Name" data-index="lastName" />
        </Table.ColumnGroup>
        <Table.Column key="age" title="Age" data-index="age" />
        <Table.Column key="address" title="Address" data-index="address" />
        <Table.Column key="tags" title="Tags" data-index="tags">
          <template #default="{ text: tags }">
            <span>
              <Tag v-for="tag in tags" :key="tag" color="blue">{{ tag }}</Tag>
            </span>
          </template>
        </Table.Column>
        <Table.Column key="action" title="Action">
          <template #default="{ record }">
            <span>
              <a>Action 一 {{ record.firstName }}</a>
              <Divider type="vertical" />
              <a>Delete</a>
            </span>
          </template>
        </Table.Column>
      </Table>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import Divider from '@sscd/divider';
  import Tag from '@sscd/tag';
  import Table from '@sscd/table';
  const data = [
    {
      key: '1',
      firstName: 'John',
      lastName: 'Brown',
      age: 32,
      address: 'New York No. 1 Lake Park',
      tags: ['nice', 'developer'],
    },
    {
      key: '2',
      firstName: 'Jim',
      lastName: 'Green',
      age: 42,
      address: 'London No. 1 Lake Park',
      tags: ['loser'],
    },
    {
      key: '3',
      firstName: 'Joe',
      lastName: 'Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
      tags: ['cool', 'teacher'],
    },
  ];
</script>
